<template>
<!--  <div style="max-height: 150px;position:relative;overflow: scroll;overflow-x: auto">-->
  <div>
    <a-row>
      <a-col :md="20">
        <a-row type="flex" :gutter="16" v-for="(item, index) in queryParams" :key="index">
          <a-col :md="8" :xs="24" style="margin-bottom: 12px;">
            <a-select
              showSearch
              :filterOption="filterOption"
              placeholder="选择查询字段"
              style="width: 100%;"
              v-model="item.field"
              :getPopupContainer="node=>node.parentNode"
              @select="(val,option)=>handleSelected(option,item)"
            >
              <a-select-option :key="index" :value="it.field" v-for="(it,index) in columns">{{it.title}}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :md="4" :xs="24" style="margin-bottom: 12px;">
            <a-select
              placeholder="匹配规则"
              style="width: 100%"
              :value="item.rule"
              :getPopupContainer="node=>node.parentNode"
              @change="handleRuleChange(item, $event)">
              <a-select-option value="eq">等于</a-select-option>
              <a-select-option value="like">包含</a-select-option>
              <a-select-option value="ne">不等于</a-select-option>
              <a-select-option value="gt">大于</a-select-option>
              <a-select-option value="ge">大于等于</a-select-option>
              <a-select-option value="lt">小于</a-select-option>
              <a-select-option value="le">小于等于</a-select-option>
            </a-select>
          </a-col>
          <a-col :md="10" :xs="24" style="margin-bottom: 12px;">
            <component
              style="width: 100%"
              :is="getComponent(item.rowType)"
              :format="item.format"
              :placeholder="item.placeholder || ''"
              v-model="item.val"
              :dic="item.options"/>
          </a-col>
          <a-col :md="2" :xs="0" style="margin-bottom: 12px;">
            <a-button @click="handleAdd" icon="plus"></a-button>&nbsp;
            <a-button v-show="fieldSize" @click="handleDel( index )" icon="minus"></a-button>
          </a-col>
        </a-row>
      </a-col>
      <a-col :md="4" style="margin-bottom: 12px;">
        <a-button style="margin-left: 8px" icon="search" type="primary" @click="query">查询</a-button>
        <a-button style="margin-left: 8px" icon="redo" @click="reset">重置</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>

import moment from 'moment'

export default {
  name: 'SuperQuery',
  props: {
    fieldList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      isShow: false,
      queryParams: [
        {
          field: undefined,
          rule: 'eq'
        }
      ],
    }
  },
  computed: {
    fieldSize () {
      return this.queryParams.length > 1
    },
    columns () {
      return this.fieldList.filter(item => {
        return !item.hidden
      })
    },
  },
  methods: {
    // 添加搜索条件
    handleAdd () {
      this.queryParams.push({ rule: 'eq' })
    },
    // 删除搜索条件
    handleDel (index) {
      this.queryParams.splice(index, 1)
    },
    getComponent (type) {
      let result = 'a-input'
      if (type === 'select') {
        result = 'biz-select'
      } else if (type === 'input') {
        result = 'a-input'
      } else if (type === 'date') {
        result = 'biz-date'
      }
      return result
    },
    query () {
      if (!this.isNullArray(this.queryParams)) {
        const params = this.removeEmptyQueryParam(this.queryParams)
        for (const param of params) {
          if (Array.isArray(param.val)) {
            param.val = param.val.join(',')
          } else if (param.rowType === 'date') {
            param.val = moment(param.val).format('YYYY-MM-DD')
          }
        }
        this.$emit('ok', {
          queryType: 'and',
          queryItems: params
        })
        // 清空字段
      } else {
        this.$emit('ok', null)
        // this.$message.error('不能查询空条件')
      }
    },
    // 清空
    reset () {
      this.queryParams = [
        {
          field: undefined,
          rule: 'eq'
        }
      ]
      const queryParam = {
        queryType: 'and',
        queryItems: [
          {
            field: undefined,
            rule: 'eq'
          }
        ]
      }
      this.$emit('ok', queryParam)
    },
    // 查询字段搜索
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    // 处理选择的查询字段
    handleSelected (node, item) {
      console.log(node, item,'node, item')
      const it = this.fieldList.find(it => it.field === item.field)
      item['rowType'] = it.type
      item['rowName'] = it.title
      if (it.options) {
        item['options'] = it.options
      }
      this.$set(item, 'val', undefined)
    },
    // 搜索类型
    handleRuleChange (item, newValue) {
      this.$set(item, 'rule', newValue)
    },
    // 工具类 判断是不是空数组对象
    isNullArray (array) {
      if (!array || array.length === 0) {
        return true
      }
      if (array.length === 1) {
        const obj = array[0]
        if (!obj.field || (obj.val == null || obj.val === '') || !obj.rule) {
          return true
        }
      }
      return false
    },
    removeEmptyQueryParam (arr) {
      const array = JSON.parse(JSON.stringify(arr))
      for (let i = 0; i < array.length; i++) {
        const item = array[i]
        if (item == null || Object.keys(item).length <= 0 || !item.field) {
          array.splice(i--, 1)
        } else {
          delete item.rowName
          if (Array.isArray(item.options)) {
            delete item.options
          }
        }
      }
      return array
    }
  }
}
</script>

<style scoped>

</style>
